// import {tabStyleData} from '~/const/common'
import cookie from 'js-cookie';
// 在自己的项目的src/const路劲添加tabs.js文件

// tabs组件中的默认值如下
// // tab页签样式控制
// const tabStyleData = {
//   arrowWidth: '33px', // 可配置--左右箭头宽度
//   activeFontColor: '#4D84FF', // 可配置--选中的文字颜色
//   fontSize: '12px', // 可配置--文字大小
//   fontColor: '#666666', // 可配置--文字颜色
//   closeColor: '#999', // 可配置--关闭按钮颜色
//   activeCloseColor: 'red', // 可配置--滑入是关闭按钮颜色
//   backgroundColor: '#ffffff', // 可配置--背景色
//   borderColor: ' #E6E6E6', // 可配置--border色
//   borderRadius: '0', // 可配置--圆角
//   border: '1px solid', // 可配置--border的宽度和类型（element-ui的tab的border-style属性设置了solid，此处可能存在问题）
//   borderRightWidth: '1px', // 可配置--设置border位置
//   iconColor: '#333', // 可配置--左右滑动操作按钮的颜色
//   iconColorNotAllowed: '#999', // 可配置--左右滑动操作按钮的颜色
//   scrollTime: 200, // 可配置单位ms--
//   scrollWaitTime: 100 // 可配置单位ms
// }
const tabStyleData = {}
const appData = {
  appId: cookie.get('appId') || '', // appid用来选择系统后，用于获取并展示菜单
  companyId: cookie.get('companyId') || '', // companyId用来选择系统后，用于获取并展示菜单
  userName: cookie.get('userName') || '', // userName用来选择系统后，用于获取并展示菜单
}

// 全局监听
const homeTab = {
  name: '首页',
  isActive: true,
  isFixed: true,
  params: {},
  pathname: '/'
}
function getTabs() {
  setApp(appData)
  if (window !== undefined) {
    let tabsStr = window.sessionStorage.getItem('tabList')
    let tabList = tabsStr ? JSON.parse(tabsStr) : []
    return tabList.length > 0 ? tabList : [homeTab]
  }
}
function setTabs(value) {
  if (window !== undefined) {
    window.sessionStorage.setItem('tabList', JSON.stringify(value))
  }
}
// 以下方法校验是否需要清空tabList
function getApp() {
  let appStr = window.sessionStorage.getItem('appData')
  let appData = appStr ? JSON.parse(appStr) : {}
  return appData
}
function setStorageAppData({appId, companyId, userName} = {}) {
  if (appId || companyId || userName) {
    window.sessionStorage.setItem('appData', JSON.stringify({appId, companyId, userName}))
  }
}
function isSameApp(oldVal, newVal) {
  return oldVal.appId === newVal.appId && oldVal.companyId === newVal.companyId && oldVal.userName === newVal.userName
}
function setApp(newVal) {
  const oldVal = getApp()
  if (!isSameApp(oldVal, newVal)) {
    setStorageAppData(newVal)
    window.sessionStorage.setItem('tabList', JSON.stringify([]))
  }
}

export const state = () => ({
  isShowTab: window.location.pathname.includes('/m-perfeval-pc/') || window.location.port.includes('3015'),
  isUseStorage: true,
  tabList: getTabs(),
  tabStyleData,
  currentPath: {
    name: '首页',
    isActive: true,
    closeable: false,
    params: {},
    pathname: '/'
  }
});
function resetActive (list) {
  list.forEach(item => {
    item.isActive = false
  })
}
export const mutations = {
  // 删除所有tab
  setCurrentPath(state) {
    state.currentPath = state.tabList.find(item => item.isActive)
    state.isUseStorage && setTabs(state.tabList)
  },
  // 重设
  setList(state) {
    state.tabList.splice(1, state.tabList.length - 1)
    state.tabList[0].isActive = true
    state.isUseStorage && setTabs(state.tabList)
  },
  // 删除单个
  deleteItem(state, pathData) {
    pathData = pathData.pathname ? pathData : {pathname: pathData}
    let isActiveFlag = pathData.isActive
    if (pathData.isFixed) {
      return
    }
    let index = state.tabList.findIndex(item => item.pathname === pathData.pathname)
    // 删除当前选中的tab
    if (index >= 1) {
      state.tabList.splice(index, 1)
    }
    // 当前删除的正好被选中了
    if (isActiveFlag) {
      // console.log(index, state.tabList[index - 1].pathname, 'del')
      let item = state.tabList[index] || state.tabList[index - 1]
      item.isActive = true
    }
    state.isUseStorage && setTabs(state.tabList)
  },
  // 删除单个
  deleteOtherItem(state, pathData) {
    pathData = pathData.pathname ? pathData : {pathname: pathData}
    pathData.isActive = true
    let [ item ] = state.tabList
    let index = state.tabList.findIndex(item => item.pathname === pathData.pathname)
    // 删除当前选中的tab
    if (index >= 1) {
      state.tabList = [item, pathData]
    } else {
      item.isActive = true
      state.tabList = [item]
    }
    state.isUseStorage && setTabs(state.tabList)
  },
  // 选中
  updateItemStatus(state, pathData) {
    pathData = pathData.pathname ? pathData : {pathname: pathData}
    let index = state.tabList.findIndex(item => item.pathname === pathData.pathname)
    if (index >= 0) {
      resetActive(state.tabList)
      state.tabList[index].isActive = true
    }
    state.isUseStorage && setTabs(state.tabList)
  },
  // 加入
  pushItem(state, {pathData, flag = false}) {
    resetActive(state.tabList)
    // console.log(pathData, 'pathData')
    let tabetPath = pathData.pathname.split('?')[0]
    let index = state.tabList.findIndex(item => {
      let indexPath = item.pathname.split('?')[0]
      if (item.pathname === pathData.pathname || (tabetPath === indexPath && flag)) {
        item.pathname = pathData.pathname
        item.name = pathData.name
        return true
      }
    })
    if (index >= 0) {
      // console.log(index, pathData.pathname, state.tabList[index], 'push')
      state.tabList[index].isActive = true
      state.isUseStorage && setTabs(state.tabList)
      return
    } else {
      state.tabList.push(pathData)
    }
    state.isUseStorage && setTabs(state.tabList)
  }
};
export const actions = {
  // 删除所有tab
  updateOne({ commit }, pathData) {
    commit('updateItemStatus', pathData)
    commit('setCurrentPath')
  },
  // 删除所有tab
  deleteAll({ commit }) {
    commit('setList')
    commit('setCurrentPath')
  },
  // 删除单个
  deleteOne({commit}, pathData) {
    commit('deleteItem', pathData)
    commit('setCurrentPath')
  },
  // 删除单个
  deleteOther({commit}, pathData) {
    commit('deleteOtherItem', pathData)
    commit('setCurrentPath')
  },
  /**
   * @description 重置商品列表
   * @param {*} {commit} 
   * @param {*} pathData 
   * @param {boolean} flag 是否覆盖
   */
  push({commit}, {pathData, flag = false}) {
    if (!isSameApp(getApp(), appData)) {
      setApp()
      commit('setList')
      commit('setCurrentPath')
      return
    }
    pathData.isActive = true
    commit('pushItem', {pathData, flag})
    commit('setCurrentPath')
  }
};
